<script lang="ts" setup>
import { ref, toRefs } from "vue";
import { useCounterStore } from '@/stores/count.ts'
import { storeToRefs } from 'pinia'

const countStore = useCounterStore();
// 结构赋值，直接取出数据来
// let { sum } = toRefs(countStore);
//-- toRefs 会把所有的sorte 属性都拿过来， 比较臃肿
// let { sum } = toRefs(countStore);
//-- storeToRefs 只关注 store 的数据， 不关心其他的
let { sum } = storeToRefs(countStore);


// 以下两种方式都能拿到sum的值

// console.log(countStore.sum,'111111');
// console.log(countStore.$state.sum,'111111');

defineOptions({
    name: "Count",
});
//--================= Data
let n = ref(1);

//--================= Methods
function add() {
    //第一种修改方式
    // countStore.sum += 1;
    sum.value += 1;

    //第二种修改方式， 可以批量修改。多属性要修改的时候， 用这种比较合适
    // countStore.$patch({
    //     sum: 888
    // })
    //第三种方式。
    //countStore.increment(n);

}

function minus() {

}
//--================= Other


</script>

<template>
    <div class="count">
        <h2>当前求和为: {{ countStore.sum }}</h2>
        <select style="width: 100px;" v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">加</button>
        <button @click="minus">减</button>
    </div>

</template>

<style scoped>
.count {
    background-color: skyblue;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}

button,
select {
    margin: 0 5px;
    height: 25px;
}
</style>
